import React, { Component } from 'react'
import './Allgoods.scss'
import {good_list} from '../utils/api'
export default class Allgoods extends Component {
  constructor(props){
    super(props);
    this.state={
      currentIndex:0,
      goodList:[],
      btnArr:['综合','销量','新品','价格','筛选']
    }
  }
  handleClick(index){
    this.setState({
        currentIndex:index
    })
}
componentDidMount(){
  good_list({id:this.props.location.state.id}).then((res)=>{
   this.setState({
    goodList:res.data.list
   })
  })
}
 toCommodityDetails(id){
  this.props.history.push({ pathname:'/index/CommodityDetails', state:{ id } })
}
  render() {
    return (
      <div className='allgoods'>
        <div className="head">
          <div className="hdtop">
            <div className="topz">全部商品</div>
            <div className="topr">
              <div className='tb'>
                <span className="iconfont icon-dian"></span> |
                <span className="iconfont icon-icon-yuanxk
"></span>
              </div>
            </div>
          </div>
          <div className="hdbtm">
            <span className="iconfont icon-sousuo"></span>
            <input type="text" placeholder="搜索店铺内商品" />
          </div>
          <div className="btn">
              {
                this.state.btnArr.map((item,index)=>{
                  return(
                    <p key={index} className={`${this.state.currentIndex === index ? 'active' : ''}`} onClick={()=>{
                      this.handleClick(index)
                    }}>{item}</p>
                  )
                })
              }
          </div>
        </div>

        <div className="mainlist">

          {
            this.state.goodList.map((item,index)=>{
              return (
                <div className="mainBox" key={index} onClick={() => { this.toCommodityDetails(item.id) }}>
                <div className="mainTu">
                  <img src={item.pic} alt="" />
                </div>
                <div className="txt">{item.name}</div>
                <div className="price">
                  <div className='bx' ><span>{item.salesPrice
.name}￥</span><span className='s2'>{item.salesPrice
  .value}</span></div>
                </div>
              </div>
              )
            })
          }
        </div>

      </div>
    )
  }
}
